<template>
  <div class="final-found-item" v-if="(dataArr && dataArr.length > 0)">
    <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

        <van-swipe :autoplay="3000" indicator-color="#fff">
          <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
            <!-- <van-skeleton :loading="!loading"> -->
            <img v-lazy="image.res_url[0]" />
            <!-- </van-skeleton> -->
          </van-swipe-item>
        </van-swipe>

        <KeepAlive>
          <masonry-view :dataArr="dataArr" :switchSelected="switchSelected" />
        </KeepAlive>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { Api } from "@/utils/apis"
import { showToast } from 'vant';
import type { DataType, AdvertisingDataType } from "@/typings"
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";

const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
let dataArr = ref<DataType[]>([])
let advertisingData = ref<AdvertisingDataType[]>([])

// 获取数据
const getRecommended = async () => {
  let data = await Api.getRecommended()
  dataArr.value = data?.data?.list
}

// 获取push数据
const getPushRecommended = async () => {
  let data = await Api.getRecommended()
  dataArr.value.push(...data?.data?.list)
}

// 获取广告数据
const getAdvertising = async () => {
  let data = await Api.getAdvertising({
    category: "EXPLOREBANNER",
    extJson: '{"domainId":"-1000"}'
  })
  advertisingData.value = data[0].ads;
  // console.log(data);
}

const onLoad = () => {
  if (refreshing.value) {
    dataArr.value = [];
    refreshing.value = false;
  }
  // 异步更新数据
  //  axios 请求
  getPushRecommended()

  // 加载状态结束 
  loading.value = false;

  // 数据全部加载完成
  if (dataArr.value.length >= 100) {
    finished.value = true;
  }
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
  showToast('刷新成功');
};

const switchSelected = (id: number) => {
  dataArr.value.forEach(r => {
    if (r.itemId === id) {
      if (r.postData.postCount.viewCount == 1) {
        r.postData.postCount.viewCount = 0;
        r.postData.postCount.favoriteCount -= 1;
      } else {
        r.postData.postCount.viewCount = 1;
        r.postData.postCount.favoriteCount += 1;
      }
    }
  });
};


onMounted(() => {
  getRecommended()
  getAdvertising()
})


</script>

<style scoped lang="scss">
.final-found-item {
  width: 98vw;
  margin: 0px auto;
  margin-top: 10px;
  margin-bottom: 55px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  ::v-deep(.my-swipe) {
    ::v-deep(.van-swipe-item) {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }

  ::v-deep(.van-swipe-item) {
    height: 117.75px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: rgb(255, 255, 255);
  }

  ::v-deep(.van-skeleton__row) {
    height: 30px !important;
  }
}
</style>